<template>
	<div>
		<el-dialog v-model="upLoadVisible" title="" width="40%">
			<div class="title">Join the club</div>
			<div class="back">
				<div class="ul">
					<div class="li f f-a-c">
						<div class="dian"></div>
						Save time & effort with automatic monthly orders
					</div>
					<div class="li f f-a-c">
						<div class="dian"></div>
						Cancel anytime
					</div>
					<div class="li f f-a-c">
						<div class="dian"></div>
						Work long-term with your seller for best results
					</div>
				</div>
				<div class="setMonth">
					<div @click="indsQie(1)" :class="{ borAct: ind2 == 1 }" class="topThon hand m-b-20 f f-a-c f-j-b">
						<div class="lefPlan">1-month plan</div>
						<div class="rigmonth">${{ obj.subscription }}/month</div>
					</div>
					<div v-if="obj.discountMonths" @click="indsQie(2)" :class="{ borAct: ind2 == 2 }" class="topThon">
						<div class="hand f f-a-c f-j-b">
							<div class="lefPlan">{{ obj.discountMonths }}-month plan</div>
							<div class="rigmonth">${{ (obj.discount / obj.discountMonths).toFixed(2) }}/month</div>
						</div>
						<div class="lanDao hand m-t-10 f f-a-c f-j-b">
							<div class="lefDao">
								Save ${{ (obj.subscription - (obj.discount / obj.discountMonths).toFixed(2)).toFixed(2) }}
								<!-- ({{ (((obj.discount / obj.discountMonths).toFixed(2) / obj.kcClubPriceRespVO.subscription).toFixed(2) * 10).toFixed(1) }} OFF) -->
							</div>
							<div class="rigDao">avg. per order</div>
						</div>
					</div>
				</div>
				<div @click="goPay" class="btn hand">Continue (${{ money }})</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { Plus } from "@element-plus/icons-vue";
	import { ClubPays } from "@/api/knowClub/index.js";
	let upLoadVisible = ref(false);
	let ind2 = ref(1);
	let ind1s = ref(1);
	let money = ref(0);
	let obj = ref({});
	const emit = defineEmits(["reportObj"]);
	// 点击提交时
	const report = () => {
		emit("reportObj", { imgList: imgList.value, content: value2.value });
		// 清空
		imgList.value = [];
		fileList.value = [];
		value2.value = [];
	};
	// 点击支付
	const goPay = async () => {
		if (ind1s.value == 1) {
			// 代表一个月
			let n = await ClubPays({
				clubId: obj.value.id,
				months: 1,
				successUrl: "http://www.xpertbay.com/BuyMyClub?num=1",
				cancelUrl: "http://www.xpertbay.com/BuyMyClub?num=1"
			});
			if (n.code == 200) {
				window.open(n.data);
				upLoadVisible.value = false;
			}
		} else {
			// 代表多个月
			let n = await ClubPays({
				clubId: obj.value.id,
				months: obj.value.discountMonths,
				successUrl: "http://www.xpertbay.com/BuyMyClub?num=1",
				cancelUrl: "http://www.xpertbay.com/BuyMyClub?num=1"
			});
			if (n.code == 200) {
				window.open(n.data);
				upLoadVisible.value = false;
			}
		}
	};
	const indsQie = num => {
		ind1s.value = num;
		ind2.value = num;
		if (num == 1) {
			money.value = obj.value.subscription;
		} else if (num == 2) {
			money.value = obj.value.discount;
		}
	};
	// 暴露给父组件
	defineExpose({
		upLoadVisible,
		obj,
		money
	});
</script>
<style scoped lang="scss">
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}

	::v-deep .el-dialog {
		border-radius: px(17) !important;
		padding: 30px 50px 50px 50px;
	}
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: px(30);
	}
	.textarea {
		height: 220px !important;
	}
	.upLoad {
		margin-top: px(10);
		max-height: px(300);
		overflow: auto;
	}
	.upLoad::-webkit-scrollbar {
		width: px(7); /* 滚动条宽度 */
	}
	.upLoad::-webkit-scrollbar-track {
		background: #f7f7f9; /* 滚动条轨道背景色 */
	}
	.upLoad::-webkit-scrollbar-thumb {
		background: #c1c5cb; /* 滚动条滑块颜色 */
		border-radius: px(10);
	}
	.upLoad::-webkit-scrollbar-thumb:hover {
		background: #c1c5cb; /* 鼠标悬停时滚动条滑块颜色 */
	}
	.btnBox {
		justify-content: end;
		margin-top: px(15);
		.botBtn {
			font-size: px(21);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #ffffff;
			padding: px(16) px(40);
			background: #02102e;
			border-radius: px(10);
		}
	}
	.topTit {
		font-size: px(26.6);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
		margin-bottom: px(30);
	}
	::v-deep .ant-input:focus {
		border-color: #000000 !important;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	::v-deep .ant-input:hover {
		border-color: #000000 !important;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	}
	::v-deep .el-upload--picture-card {
		height: px(120) !important;
		width: px(120) !important;
	}
	::v-deep .el-upload-list--picture-card .el-upload-list__item {
		height: px(120) !important;
		width: px(120) !important;
	}
	.back {
		width: 100%;
		height: 404px;
		background: #f7f7f9;
		border-radius: 16px;
		padding: 20px;
	}
	.title {
		font-size: 22px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		margin-bottom: 20px;
		color: #02102e;
	}
	.ul {
		margin-bottom: 20px;

		.li {
			font-size: 14px;
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: LEFT;
			color: #02102e;
			margin-bottom: 8px;

			.dian {
				width: 6px;
				height: 6px;
				border-radius: 3px;
				background-color: #02102e;
				margin-right: 6px;
			}
		}
	}
	.setMonth {
		.topThon {
			width: 100%;
			background: #ffffff;
			border: 1px solid #eaebee;
			border-radius: 12px;
			padding: 24px;

			.lefPlan {
				font-size: 16px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #02102e;
			}

			.rigmonth {
				font-size: 16px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #02102e;
			}

			.lefDao {
				font-size: 12px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #4260ff;
			}

			.rigDao {
				font-size: 12px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #4260ff;
			}
		}
	}
	.btn {
		font-size: 16px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: center;
		width: 100%;
		height: 48px;
		line-height: 48px;
		background: #02102e;
		border-radius: 8px;
		color: #ffffff;
		margin-top: 40px;
	}
	.borAct {
		border: 1px solid #727377 !important;
	}
</style>
